<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>简历 v3.0</title>
	<meta name="viewport" content="width=device-width" />
	<!-- favicon图标 -->
	<link rel="shortcut icon" href="../../static/favicon.png" type="image/x-icon">
	<!-- 51la网站统计 -->
	<script src="../../static/js/tongji.js"></script>
	<link rel="stylesheet" type="text/css" href="css/index.css" />

</head>

<body>


	<!-- ------------------ 简历 start ------------------ -->
	<!-- ------------------ 简历 end ------------------ -->

	<div class="resume" id="app">
		<!-- ------------------ 头部 start ------------------ -->
		<div class="resume-head">
			<div class="head-right">
				<i class="aa">111</i>
				<i class="aa">222</i>
			</div>
			<dl class="head-left">
				<dt>个人简历</dt>
				<dd>
					<p>细心从每一个细节开始</p>
					Personal resume
				</dd>
			</dl>


		</div>
		<!-- ------------------ 头部 end ------------------ -->
		<!-- ------------------ 横线 start ------------------ -->
		<div class="resume-line">
			<div class="line-l"></div>
			<div class="line-r"></div>
		</div>
		<!-- ------------------ 横线 end ------------------ -->



		<!-- ------------------ 内容 start ------------------ -->
		<main class="resume-main">




			<!-- ------------------ 基本信息 start ------------------ -->
			<div class="moudle">
				<div class="moudle-title">
					<h3>{{datas.jbxx.title}}</h3>
				</div>
				<div class="moudle-content">


					<div class="list-wrap">
						<div class="basic">
							<ul class="info">
								<li v-for="(item, index) in datas.jbxx.data" :key="index">
									<i>{{item.name}}</i><span>{{item.text}}</span>
								</li>

							</ul>
							<div class="photo">
								<!-- <img src="img/photo.jpg"> -->
								<img :src="datas.jbxx.img">
							</div>
						</div>
					</div>


				</div>
			</div>
			<!-- ------------------ 基本信息 end ------------------ -->


			<!-- ------------------ 教育背景 start ------------------ -->
			<div class="moudle">
				<div class="moudle-title">
					<h3>{{datas.jybj.title}}</h3>
				</div>
				<div class="moudle-content">
					<div class="list-wrap" v-for="(item, index) in datas.jybj.data" :key="index">
						<ul class="col-3">
							<li>{{ item.time }}</li>
							<li>{{ item.name }}</li>
							<li>{{ item.type }}</li>
						</ul>
						<div class="item-edit" v-if="item.data">
							<p>
								<strong>{{ item.data.name }}</strong>{{ item.data.text}}
							</p>
						</div>
					</div>
				</div>
			</div>
			<!-- ------------------ 教育背景 end ------------------ -->


			<!-- ------------------ 项目经验 start ------------------ -->
			<div class="moudle">
				<div class="moudle-title">
					<h3>{{datas.xmjy.title}}</h3>
				</div>
				<div class="moudle-content">


					<div class="list-wrap" v-for="(item, index) in datas.xmjy.data" :key="index">
						<ul class="col-2">
							<li>{{item.name}}</li>
							<li>{{item.text}}</li>
						</ul>
						<div class="item-edit">

							<p v-for="(item, index) in item.data" :key="index">
								<strong>{{item.name}}</strong><span>{{item.text}}</span>
							</p>

							<p>
								<strong>{{item.zhize.name}}</strong>
							<ul>
								<li v-for="(item, index) in item.zhize.data" :key="index">{{item.text}}</li>
							</ul>
							</p>
						</div>



					</div>


				</div>
			</div>
			<!-- ------------------ 项目经验 end ------------------ -->


			<!-- ------------------ 工作经验 start ------------------ -->
			<div class="moudle">
				<div class="moudle-title">
					<h3>{{datas.jybj.title}}</h3>
				</div>

				<div class="moudle-content">


					<div class="list-wrap" v-for="(item, index) in datas.gzjy.data" :key="index">

						<ul class="col-3">
							<li>{{item.time}}</li>
							<li>{{item.name}}</li>
							<li>{{item.type}}</li>
						</ul>
						<div class="item-edit">
							<ol v-for="(item, index) in item.data" :key="index">
								<li>{{item.text}}</li>
								<!-- s -->
							</ol>

						</div>
					</div>



				</div>
			</div>
			<!-- ------------------ 工作经验 end ------------------ -->


			<!-- ------------------ 专业技能 start ------------------ -->
			<div class="moudle">
				<div class="moudle-title">
					<h3>{{datas.jntc.title}}</h3>
				</div>
				<div class="moudle-content">

					<div class="list-wrap">
						<div class="item-edit" v-for="(item, index) in datas.jntc.data" :key="index">
							<ul>
								<li>{{item.text}}</li>
							</ul>
						</div>
					</div>

				</div>
			</div>
			<!-- ------------------ 专业技能 end ------------------ -->

			<!-- ------------------ 荣誉证书 start ------------------ -->
			<div class="moudle">
				<div class="moudle-title">
					<h3>{{datas.ryzs.title}}</h3>
				</div>
				<div class="moudle-content">

					<div class="list-wrap">
						<div class="item-2">
							<ul>
								<li v-for="(item, index) in datas.ryzs.data.ry" :key="index">
									<i>{{item.name}}</i><span>{{item.text}}</span>
								</li>
							</ul>
							<ul>
								<li v-for="(item, index) in datas.ryzs.data.zs" :key="index">
									<i>{{item.name}}</i><span>{{item.text}}</span>
								</li>
							</ul>
						</div>
					</div>

				</div>
			</div>
			<!-- ------------------ 荣誉证书 end ------------------ -->


			<!-- ------------------ 校园经历 start ------------------ -->
			<div class="moudle">
				<div class="moudle-title">
					<h3>{{datas.xyjl.title}}</h3>
				</div>
				<div class="moudle-content">

					<div class="list-wrap">
						<div class="item-edit">
							<p v-for="(item, index) in datas.xyjl.data" :key="index">
								<strong>{{item.name}}</strong><span>{{item.text}}</span>
							</p>
						</div>
					</div>

				</div>
			</div>
			<!-- ------------------ 校园经历 end ------------------ -->
			<!-- ------------------ 自我评价 start ------------------ -->
			<div class="moudle">
				<div class="moudle-title">
					<h3>{{datas.zwpj.title}}</h3>
				</div>
				<div class="moudle-content">

					<div class="list-wrap">
						<div class="item-edit">
							<ul>
								<li v-for="(item, index) in datas.zwpj.data" :key="index">{{item.text}}</li>
							</ul>
						</div>

					</div>

				</div>
			</div>
			<!-- ------------------ 自我评价 end ------------------ -->
			<!-- ------------------ 公共模块 start ------------------ -->
			<!-- 	<div class="moudle">
					<div class="moudle-title">
						<h3>公共模块</h3>
					</div>
					<div class="moudle-content">

						<div class="list-wrap">
							公共模块
						</div>

					</div>
				</div> -->
			<!-- ------------------ 公共模块 end ------------------ -->






		</main>
		<!-- ------------------ 内容 end ------------------ -->

	</div>





</body>

<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/vue-2.7.14.min.js"></script>
<script type="text/javascript">

	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	new Vue({
		el: '#app',

		data() {
			return {
				datas: []
			}
		},

		mounted() {
			// 这里一定要使用常量 const来引用this，不然可能会出现this指向问题
			const that = this
			// 使用getjson读取数据
			$.getJSON("./data.json", function (data) {
				// 将读取到的json数据赋值给rows
				that.datas = data.content;
				console.log("请求到的数据：", data)
			});
		},

	})
</script>

</html>